<!DOCTYPE html>
<html>
<head>
	
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>New Time Off</title>
	<link rel="icon" type="image/gif" href="/assets/img/favicon.gif">
	<link rel="icon" sizes="196x196" href="/assets/img/casey-icon-196.png">
	<link rel="icon" sizes="128x128" href="/assets/img/casey-icon-128.png">
	<link rel="apple-touch-icon" sizes="128x128" href="/assets/img/casey-icon-128.png">
	<link rel="apple-touch-icon-precomposed" sizes="128x128" href="/assets/img/casey-icon-128.png">
	<!-- style sheets -->
	<link href='//fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="assets/css/timeoff-proto-primary.css" type="text/css" media="screen" charset="utf-8">	
</head>
<body>

<div id="app-wrapper" class="">

	<!-- LEFT SIDE CONTENT SECTION -->
	<div id="left-panel" class="">
		
		<div id="profile">
			<div id="circle">
				<img src="https://teams-service.googleplex.com/photos/" alt="Your photo">
			</div>
			<div id="ldap">yourname@google.com</div>
		</div>
		
				<nav class="">
		
		<!-- top navigation -->
		<ul class="primary-sitenav">
			<li>
				<a href="home.html" class="" title="Your time off">
					<span class="icon icon-time-off"></span>
					<span class="list-description">Your time off</span>
				</a>
			</li>
			<li>
				<a href="holidays.html" class="selected" title="Google holidays">
					<span class="icon icon-calendar"></span>
					<span class="list-description">Google holidays</span>
				</a>
			</li>
			<li>
				<a href="https://goto.google.com/vacationpolicy" target="_blank" class="" title="Vacation policy">
					<span class="icon icon-policy"></span>
					<span class="list-description">Vacation policy</span>
				</a>
			</li>

		</ul>
		
		<!-- bottom navigation -->			
		<ul class="secondary-sitenav">
			<li>
				<a href="" class="" title="How to use this app">
					<span class="icon icon-help"></span>
					<span class="list-description">Get help</span>
				</a>
			</li>
			<li>
				<a href="" class="" title="Give feedback on this app">
					<span class="icon icon-feedback"></span>
					<span class="list-description">Give feedback</span>
				</a>
			</li>
		</ul>
		
		<!-- site version indicator -->
			<a class="version-indicator" href="index.html" title="Learn more about this version of the Time Off Machine">
				<span class="icon icon-dogfood"></span>
				<span class="list-description">BARK! CSS Prototype</span>
			</a>
			
		</nav>

		
	</div><!-- end side navigation -->
	
	
	<!-- MAIN CONTENT SECTION -->
	<div id="main-panel">
	
		<!-- FIXED TOP BAR -->
		<div id="app-bar" class="app-bar app-bar-centered">
			
			<div class="column-main">
				<!-- APP BAR LEFT CONTENT -->
				<div class="app-bar-content left">
					<a class="button button-appbar-icon button-back" title="See your time off" href="home.html" tabindex="52"></a>
					<h1 class="app-bar-title">Google holidays</h1>
				</div>
			
			</div>			
		</div> <!-- end APPBAR container -->


		<!-- MAIN CONTENT SUB-SECTIONS -->
		<div class="column-main" role="main">
			<ul class="page-sections">
				
				<!-- TIME OFF LIST 'HISTORY' -->
				<li class="page-section-item">
				
					<h4 class="listheader">Upcoming this year</h4>
					
					<!-- TIME OFF LIST CARD -->
					<div class="list card">
						
						<!--			
						<!-- TIME OFF LISTITEM 
						<a class="listitem" title="Go to this day in Calendar" target="_blank" href="//www.google.com/calendar/render?tab=mc&mode=month&date=20140101" >
						
							<span class="listitem-icon-container">
								<div class="time-type-icon taken"></div>
								<div class="holiday-icon-day">Wed</div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" >Jan 01, 2014</div>
								<div class="listitem-desc-secondary">New Year's Day</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM 
						<a class="listitem" title="Go to this day in Calendar" target="_blank" href="//www.google.com/calendar/render?tab=mc&mode=month&date=20140120" >
						
							<span class="listitem-icon-container">
								<div class="time-type-icon taken"></div>
								<div class="holiday-icon-day">Mon</div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" >Jan 20, 2014</div>
								<div class="listitem-desc-secondary">Martin Luther King Day</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM 
						<a class="listitem" title="Go to this day in Calendar" target="_blank" href="//www.google.com/calendar/render?tab=mc&mode=month&date=20140217" >
						
							<span class="listitem-icon-container">
								<div class="time-type-icon taken"></div>
								<div class="holiday-icon-day">Mon</div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" >Feb 17, 2014</div>
								<div class="listitem-desc-secondary">President's Day</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM 
						<a class="listitem" title="Go to this day in Calendar" target="_blank" href="//www.google.com/calendar/render?tab=mc&mode=month&date=20140526" >
						
							<span class="listitem-icon-container">
								<div class="time-type-icon taken"></div>
								<div class="holiday-icon-day">Mon</div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" >May 26, 2014</div>
								<div class="listitem-desc-secondary">Memorial Day</div>
							</span>
						</a> -->
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" title="See July 03, 2014 in Calendar" target="_blank" href="//www.google.com/calendar/render?tab=mc&mode=month&date=20140703" >
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-holiday"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" >Independence Day</div>
								<div class="listitem-desc-secondary">Thu, Jul 03 - Fri, Jul 04, 2014</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" title="See September 01, 2014 in Calendar" target="_blank" href="//www.google.com/calendar/render?tab=mc&mode=month&date=20140901" >
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-holiday"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" >Labor Day</div>
								<div class="listitem-desc-secondary">Mon, Sep 01, 2014</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" title="See November 27, 2014 in Calendar" target="_blank" href="//www.google.com/calendar/render?tab=mc&mode=month&date=20141127" >
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-holiday"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" >Thanksgiving</div>
								<div class="listitem-desc-secondary">Thu, Nov 27 - Fri, Nov 28, 2014</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" title="See December 24, 2014 in Calendar" target="_blank" href="//www.google.com/calendar/render?tab=mc&mode=month&date=20141224" >
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-holiday"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" >Christmas</div>
								<div class="listitem-desc-secondary">Wed, Dec 24 - Fri, Dec 26, 2014</div>
							</span>
						</a>
						
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" title="See December 31, 2014 in Calendar" target="_blank" href="//www.google.com/calendar/render?tab=mc&mode=month&date=20141231" >
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-holiday"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" >New Year's Eve</div>
								<div class="listitem-desc-secondary">Wed, Dec 31, 2014</div>
							</span>
						</a>
												
					</div> <!-- end list card -->
						
				</li> <!-- end page section item -->
				
				<!-- 2015 HOLIDAYS -->
				<li class="page-section-item">
				
					<h4 class="listheader">Next year</h4>
					
					<!-- TIME OFF LIST CARD -->
					<div class="list card">
									
						<!-- TIME OFF LISTITEM -->
						<a class="listitem" title="See January 01, 2015 in Calendar" target="_blank" href="//www.google.com/calendar/render?tab=mc&mode=month&date=20150101" >
						
							<span class="listitem-icon-container">
								<div class="time-type-icon time-type-holiday"></div>
							</span>
							
							<span class="listitem-desc-container">
								<div class="listitem-desc-primary" >New Year's Day</div>
								<div class="listitem-desc-secondary">Thu, Jan 01, 2015</div>
							</span>
						</a>	
						
					</div> <!-- end list card -->
						
				</li> <!-- end page section item -->
				
			</ul> <!-- end page sections -->
		
		</div><!-- end column main -->

		
	</div> <!-- end 'primary content' section -->
	
</div><!-- end app wrapper -->

<!-- JAVASCRIPT -->
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>

</body>
</html>